<template>
    <u-sticky>
        <view class="navBar">
            <view class="status_bar"></view>
            <view class="align-center pd29" style="margin-bottom: 80rpx;">
                <u-icon name="arrow-left" color="#fff" size="22" @click="handleNavigateBack"></u-icon>
                <view style="opacity: .4;">
                    <u-search 
                        placeholder="日照香炉生紫烟" 
                        :showAction="false" 
                        bgColor="#fff" 
                        margin="0 0 0 29rpx" 
                        color="#fff"
                        placeholderColor="#fff"
                    ></u-search>
                </view>
            </view> 
            <view class="justify-between pd29" style="margin-bottom: 59rpx;">
                <view class="white">
                    <view class="align-center mb16">
                        <i class="iconfont icon-huati"></i>
                        <text class="font36 weight ml8">新邻居圈</text>
                    </view>
                    <view class="font28 weight">1323篇内容 · 20.0万次浏览</view>
                </view>
                <view class="align-center weight btn">
                    <u-icon name="plus" color="#966BFF"></u-icon>
                    <text class="font26 purple ml8">关注</text>
                </view>
            </view>
            <u-tabs :list="tabsList" lineColor="#966BFF"></u-tabs>
        </view>
    </u-sticky>
    <view class="app-container">
        <Dynamic v-for="item in 10" :key="item" />
    </view>
    <i class="iconfont icon-fabutiezi issue"></i>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { handleNavigateBack } from '@/plugins/uniApp';
import Dynamic from '@/components/Dynamic/index.vue';

const tabsList = ref([
    { name: '热门' },
    { name: '最新' },
    { name: '视频' },
    { name: '图片' },
])
</script>

<style lang="scss" scoped>
.pd29 {
    padding: 0 29rpx;
}

.navBar {
    height: 480rpx;
    padding: 28rpx 0 0;
    background: url('https://v.iiar.cn/images/topic_bg.png') no-repeat;
    background-size: 100% 100%;

    .status_bar {
        height: var(--status-bar-height);
    }

    .btn {
        padding: 10rpx 29rpx;
        background: #FFFFFF;
        border-radius: 28rpx;
    }
}

.issue {
    position: fixed;
    right: 20rpx;
    bottom: 150rpx;
    font-size: 88rpx;
}
</style>